<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="14" :offset="5">
        <el-card class="top-card">
          <div class="top-card-div">
            <div>
              <i class="el-icon-user-solid"></i>
              管理中心
            </div>
            <div style="padding-left: 88%">
              <i class="el-icon-ali-fanhui my-icon" @click="backPage"></i>
            </div>
          </div>
        </el-card>
        <el-tabs
          type="border-card"
          tabPosition="left"
          class="manage-body"
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane label="基本信息" name="baseInfo">
            <BaseInfo></BaseInfo>
          </el-tab-pane>
          <el-tab-pane label="更新头像" name="updateAvatar">
            <UpdateAvatar></UpdateAvatar>
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="updatePassWord">
            <UpdatePassWord></UpdatePassWord>
          </el-tab-pane>
          <el-tab-pane label="绑定手机" name="bindPhoneNumber">
            <BindPhoneNumber></BindPhoneNumber>
          </el-tab-pane>
          <el-tab-pane
            label="申请咨询师"
            name="applyConsult"
            v-if="userrole != null && userrole == 1"
          >
            <ApplyConsult></ApplyConsult>
          </el-tab-pane>
          <el-tab-pane
            label="申请记录"
            name="applyRecord"
            v-if="userrole != null && userrole == 1"
          >
            <ApplyRecord></ApplyRecord>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BaseInfo from "./baseinfo/BaseInfo.vue";
import BindPhoneNumber from "./bindphonenumber/BindPhoneNumber.vue";
import UpdateAvatar from "./updateavatar/UpdateAvatar.vue";
import UpdatePassWord from "./updatepassword/UpdatePassWord.vue";
import ApplyConsult from "./applyconsult/ApplyConsult.vue";
import ApplyRecord from "./applyrecord/ApplyRecord.vue";
export default {
  components: {
    BaseInfo,
    BindPhoneNumber,
    UpdateAvatar,
    UpdatePassWord,
    ApplyConsult,
    ApplyRecord,
  },
  created() {
    this.userrole = localStorage.getItem("userrole");
  },
  data() {
    return {
      activeName: "baseInfo", //当前tab
      userrole: "",
    };
  },
  methods: {
    //tab 被选中时触发
    handleClick() {},
    //返回
    backPage() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.top-card {
  margin: 20px 0px 10px 0px;
}
.top-card-div {
  display: flex;
  align-items: center;
}
.my-icon {
  font-size: 30px;
  cursor: pointer;
}
.manage-body {
  height: 600px;
}
</style>